<template>
  <div style="width: 1200px;margin: 0 auto">
    <img src="/images/brand-image/brand-pavilion.png" alt="">
    <div>
      <h1>战略合作品牌</h1>
      <el-divider></el-divider>
      <div style="margin:30px auto 0 auto;">
        <el-col :span="4" v-for="b in brandArr" :key="b.id" style="margin: 10px 0;width: 225px;margin-right: 10px;margin-top: 10px">
          <el-card :body-style="{ padding: '0px'}">
            <el-image
                style="width: 200px;height: 100px"
                :src="'/images/brand-image/' + b.logo"
                @click="loadBrandInfo(b.id)"
                fit="fit"></el-image>
          </el-card>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      brandArr: [{
        id:'',
        logo:'',
      }],
    }},
  methods: {

    //跳转到品牌详情
    loadBrandInfo(brandId){
      this.$router.push('/sys-user/product/brand/brand-product?brandId=' + brandId);
    },
    //加载知名品牌
    loadBrandList(){
      let url = 'http://localhost:14001/brand/list?queryType=all';
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.brandArr = []; // 确保 brandArr 是一个空数组
          for (let i = 0; i < jsonResult.data.list.length; i++) {
            const item = jsonResult.data.list[i];
            this.brandArr.push({
              id: item.id,
              logo: item.logo.split('/')[0]
            });
          }
        }
      });
    },
  },
  mounted() {
    this.loadBrandList();
  }
}
</script>

<style scoped>

</style>